/**
 * ssr  server-side rendering 服务端渲染
 * csr client-side rendering 客户端渲染
 *  isomorphic rendering 同构渲染
 * */

/**
 * ssr 工作流程
 * 
 * 1. 用户通过浏览器请求站点
 * 2. 服务器请求api 获取数据
 * 3. 接口返回数据给服务器 
 * 4. 服务器根据模板和数据进行拼接 得到最终的HTML字符串 
 * 5. 服务器把HTML字符串 返回给浏览器，浏览器解析HTML内容并渲染。
 * 
 * 
 * 用户每次通过超链接 进行页面跳转都会触发这个流程；
 * 任何一个小操作都会导致页面刷新
 * */


/**
 * csr 工作流程
 * 
 * 1. 客户端向服务器 或CDN 发送请求，获取静态HTML页面。
 * （此时获取到的HTML页面通常为空页面）。白屏阶段
 * 
 * 2.浏览器 解析HTML内容， 识别link 和 script 标签， 
 * 然后浏览器就会加载HTML中引用的资源，例如app.css 和app.js。
 *
 * 3.服务器或CDN 会将想要的资源返回给浏览器，浏览器就对css 和js 进行解析和执行。
 * 因为页面内容任务是由js完成的，所有js被解释和执行后，才会渲染出页面的内容
 * （这个时候白屏阶段结束）但是初始化渲染出来的内容只是一个【骨架】，因为还没
 * 请求api获取数据
 * 
 * 
 * 4.客户端通过AJAX 请求api 获取数据，接口返回数据后，客户端会完成动态内容的渲染
 * 呈现完整的页面。
 * 
 * 
 * */


/**
 *                  ssr             csr
 * seo              友好            不友好
 * 白屏问题         无              有
 * 占用服务端资源   多              少
 * 用户体验         差              好
 * 
 * */


/**
 *  同构渲染 
 *  ssr+csr
 *  首次渲染使用ssr  
 *  后续 使用csr
 * 
 * 在ssr 渲染的时候 用户还不能和页面进行任何交互 
 * 需激活后才可进行交互操作
 * 
 * 
 * 激活:
 * 1. vue 当前页面已渲染的DOM元素 以及vue 组件所渲染的虚拟DOM之间建立联系
 * 2. 给当前页面的DOM元素绑定事件
 * 
 * 
 * 
 * */

/**
 *                  ssr             csr             同构渲染
 * seo              友好            不友好          友好   
 * 白屏问题         无              有              无
 * 占用服务端资源   多              少              中
 * 用户体验         差              好              好
 * 
 * */


/**
 *  误区： 同构渲染并不能提升可交互时间
 * 
 * 需要像csr那样等待js资源加载完成后 且客户端 激活完成后，才能响应用户操作。
 * 
 * 
*/


/**
 *  ssr 渲染并不会执行 beforeMount mounted beforeUpdate updated 等生命周期
 *  代码 在 服务器上运行时，并不会对组件进行挂载   所以1，2 不会执行
 *  又因为ssr 是应用的快照， 不存在数据的变化后的重新渲染，所以3，4不会执行
 * 
 * 同构环境变量 判断当前代码运行的环境
 * 
 * 
 * clientOnly 组件
 * 
 * */


import { ref, onMounted, defineComponent } from 'vue'

export const ClientOnly = defineComponent({
    set (_, { slots }) {
        const show = ref(false)
        onMounted(() => {
            show.value = true
        })

        return () => (show.value && slots.default ? slots.default() : null)
    }
})